<template>
	<PageWrapper title="表格基础示例">
		<BasicTable
			title="基础示例"
			titleHelpMessage="温馨提醒"
			:columns="columns"
			:dataSource="data"
			:canResize="canResize"
			:loading="loading"
			:striped="striped"
			:bordered="border"
			showTableSetting
			:pagination="pagination"
		>
			<template #toolbar>
				<a-button type="primary" @click="toggleCanResize">
					{{ !canResize ? '自适应高度' : '取消自适应' }}
				</a-button>
				<a-button type="primary" @click="toggleBorder">
					{{ !border ? '显示边框' : '隐藏边框' }}
				</a-button>
				<a-button type="primary" @click="toggleLoading"> 开启loading </a-button>
				<a-button type="primary" @click="toggleStriped">
					{{ !striped ? '显示斑马纹' : '隐藏斑马纹' }}
				</a-button>
			</template>
		</BasicTable>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable } from '#/components';
import type { BasicColumn } from '#/types';
import { PageWrapper } from '#/Page';

const columns = [
	{
		title: 'ID',
		dataIndex: 'id',
		fixed: 'left',
		width: 200,
	},
	{
		title: '姓名',
		dataIndex: 'name',
		width: 150,
	},
	{
		title: '地址',
		dataIndex: 'address',
	},
	{
		title: '编号',
		dataIndex: 'no',
		width: 150,
		sorter: true,
		defaultHidden: true,
	},
	{
		title: '开始时间',
		width: 150,
		sorter: true,
		dataIndex: 'beginTime',
	},
	{
		title: '结束时间',
		width: 150,
		sorter: true,
		dataIndex: 'endTime',
	},
];

function getBasicData() {
	const data: any = (() => {
		const arr: any = [];
		for (let index = 0; index < 40; index++) {
			arr.push({
				id: `${index}`,
				name: 'John Brown',
				age: `1${index}`,
				no: `${index + 10}`,
				address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
				beginTime: new Date().toLocaleString(),
				endTime: new Date().toLocaleString(),
			});
		}
		return arr;
	})();
	return data;
}

export default defineComponent({
	name: 'BasicTableDemo',
	components: { BasicTable, PageWrapper },
	setup() {
		const canResize = ref(true);
		const loading = ref(false);
		const striped = ref(true);
		const border = ref(true);
		const pagination = ref<any>(false);
		function toggleCanResize() {
			canResize.value = !canResize.value;
		}
		function toggleStriped() {
			striped.value = !striped.value;
		}
		function toggleLoading() {
			loading.value = true;
			setTimeout(() => {
				loading.value = false;
				pagination.value = { pageSize: 20 };
			}, 3000);
		}
		function toggleBorder() {
			border.value = !border.value;
		}

		return {
			columns: columns as BasicColumn[],
			data: getBasicData(),
			canResize,
			loading,
			striped,
			border,
			toggleStriped,
			toggleCanResize,
			toggleLoading,
			toggleBorder,
			pagination,
		};
	},
});
</script>
